<div class="stage-library-pane" ng-controller="StageLibraryController">
  <form class="form-group-sm">

    <div class="stage-filter">
      <select class="form-control" name="stageLibrary" ng-model="$storage.stageFilterGroup"
              ng-change="onStageFilterGroupChange()"
              ng-options="stageGroup.label group by stageGroup.group for stageGroup in stageGroups track by stageGroup.name">
        <option value="">{{'global.form.allStages' | translate}}</option>
      </select>
    </div>

    <div class="btn-group stage-search" >
      <input type="search" class="form-control" placeholder="Type to search"
             ng-model="searchInput"
             ng-change="onStageFilterGroupChange()">
      <span class="glyphicon glyphicon-remove-circle search-clear"
            ng-click="searchInput = '';onStageFilterGroupChange();"></span>
    </div>

    <div class="stage-list-container">
      <ul class="stages-list">
        <li id="item1" draggable drag-data="stageLibrary"
            ng-repeat="stageLibrary in filteredStageLibraries | orderBy: 'label'"
            ng-init="icon=getStageIconURL(stageLibrary)"
            tooltip-placement="{{$index < filteredStageLibraries.length - 2 ? 'bottom' : 'top'}}"
            tooltip="{{stageLibrary.description}}"
            tooltip-append-to-body="true"
            tooltip-popup-delay="500">
          <a role="menuitem" tabindex="-1" href="/"
             ng-click="addStageInstance({stage: stageLibrary}, $event)"
             ng-style="{'background-image': 'url({{icon}})'}">
            <span>{{stageLibrary.label}}</span>
          </a>
        </li>
      </ul>
    </div>

  </form>
</div>